/**
 * Created by Administrator on 2017/2/14.
 */
import React, {Component, PropTypes} from 'react';
import {Header} from '../header/header'
import {initFunction,fade} from '../../scripts/tip'
import {getQueryString} from '../../scripts/url'
import {initProductDetails} from '../../scripts/productDetails'

export default class Product extends Component {
    componentDidMount() {

        fade();

        initFunction();

        $(document).bind("mobileinit", function()
        {
            if (navigator.userAgent.indexOf("Android") != -1)
            {
                $.mobile.defaultPageTransition = 'none';
                $.mobile.defaultDialogTransition = 'none';
            }
        });

        var url=location.href;

        //TODO getProductId
        var productId=getQueryString("productId",url);

        initProductDetails(productId);

        $('.ProductDetialsback').click(function(){
            location.href='#/mall/list'
        })

    }
    render(){
        return <div className="productDetails">
            <Header headerTitle="商品详情" className="ProductDetialsback" />
           <div className="main fadeaction">
               <BannerDetails />
               <TextDetails />
               <ProductImg />

               <ProductPop />
           </div>

            <BtnBottom btnTitle='立即购买'className="buyBtn"/>
            </div>
    }
}

export  class BannerDetails extends Component {
    render(){
        return <div className="BannerWrap">
            <div className=" productBannerWrap">
                <div className="productBanner swiper-container">
                    <ul className="Banner swiper-wrapper">
                         <li className="swiper-slide"><img src="images/grey.gif"/></li>
                    </ul>
                    <div className="pagination"></div>
                </div>
            </div>
        </div>
    }
}

export  class TextDetails extends Component {

    render(){
        return <div className="TextDetails">
              <div className="property border-tb">
                  <h1>  </h1>
                  <div className="price">
                      <span className="productPrice"></span>
                      <span>红包抵用券最高可以抵用<span className="price_p">￥<span className="p-num"></span></span></span>
                  </div>
                  <div className="freightSale">
                      <span className="postage"> </span>
                      <span className="soldCount"> </span>
                  </div>
              </div>
            <div className="select_product">

            </div>
        </div>
    }
}


export  class ProductImg extends Component {
    render(){
        return <div className="ProductImg">

        </div>
    }
}


export  class BtnBottom extends Component {
    static propTypes = {

        btnTitle: PropTypes.string,
        className: PropTypes.string
    };
    render(){

        const {className,btnTitle} = this.props;
        let classNames = ['sureBtn'];

        if(className) {
            classNames.push(className);
        }

        return <div  className={classNames.join(' ')}>
            <a href="javascript:;">
                {btnTitle}
            </a>
        </div>
    }
}

export  class ProductPop extends Component {
    render(){
        return <div className="product-dialog hide">
            <div className="product-dialog-title border-tb">
                <h1>
                    <a href="javascript:;">选择规格型号</a>
                    <a href="javascript:layer.closeAll();">完成</a>
                </h1>
            </div>
            <div className="product-models border-tb">
                <h2>颜色分类</h2>
                <ul className="models">

                </ul>
            </div>
            <div className="product-size border-tb">
                <h2>型号尺寸</h2>
                <ul  className="vision">

                </ul>
            </div>
            <div className="product-number border-tb">
              <div className="product-number-wrap">
                  <h2>购买数量</h2>

                  <p className="btn-minus off">
                      <a href="javascript:;" className="btn minus"> </a>
                  </p>
                  <p className="btn-input">
                      <input type="tel" defaultValue ="1" disabled/>
                  </p>
                  <p className="btn-plus">
                      <a href="javascript:;" className="btn plus"> </a>
                  </p>
              </div>
            </div>
        </div>
    }

}